<template>
	<view class="conta flex align-center">

		<view class="show">

		</view>
		<view class="Tabbar text-white flex align-center justify-around">
			<view class="" v-for="(item, index) in tabbar" v-if="tabbar.length">
				<view @click="hanleCheck({ index, page: item.page })"
					class="flex  flex-direction align-center justify-between">
					<image :class="[
							index == $store.state.sen.tabIndex ? 'big' : '',
							item.title==='住宿'?'leftI':'',
							item.title==='材料'?'cailiao':'',
							item.title==='收集'?'gather':'',
							item.title==='日程'?'richeng':'',
							item.title==='人员'?'peoples':'',
							item.title==='资料'?'ziliao':''
							]" :src="item.rc" mode="" :style="{ width: item.w, height: item.h }"></image>
					<view>
						{{ item.title }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lc from '../static/tabber_img/cailiao.png';
	import kc from '../static/tabber_img/kaocha.png';
	import rc from '../static/tabber_img/gougou.png';
	import ry from '../static/tabber_img/hulu.png';
	import zs from '../static/tabber_img/shusu.png';
	import sj from '../static/tabber_img/gather.png';
	export default {
		name: 'custom-tabbar',
		props: {
			tabIndex: {
				default: 0
			}
		},
		created() {
			// console.log(this.$store.state.sen.tabIndex,'状态');

		},
		data() {
			return {
				// 110,90   110,90  80,80  100,100  103,103
				tabbar: [
					// {
					// 	rc: sj,
					// 	w: '82upx',
					// 	h: '75upx',
					// 	title: '收集',
					// 	page: '/pages/gather/gather'
					// },
					{
						rc: rc,
						w: '66upx',
						h: '55upx',
						title: '日程',
						page: '/pages/index/index'
					},
					{
						rc: ry,
						w: '67upx',
						h: '57upx',
						title: '人员',
						page: '/pages/personnel/personnel'
					},
					{
						rc: zs,
						w: '70upx',
						h: '70upx',
						title: '住宿',
						page: '/pages/stay/stay'
					},
					{
						rc: kc,
						w: '67upx',
						h: '60upx',
						title: '考察点',
						page: '/pages/Inspection/Inspection'
					},
					{
						rc: lc,
						w: '62upx',
						h: '48upx',
						title: '资料',
						page: '/pages/material/material'
					}
				]
			};
		},
		methods: {
			hanleCheck(obj) {
				this.$store.commit('sen/checkInde', obj.index);
				// console.log(this.$store.state.sen.tabIndex, obj.index);
				uni.navigateTo({
					url: obj.page
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.ziliao {
		position: relative;
		top: 6rpx;
	}

	.peoples {
		position: relative;
		top: 6rpx;
	}

	.richeng {
		position: relative;
		top: 10rpx;
	}

	.gather {
		position: relative;
		top: 10rpx;
		left: -17rpx;

	}

	.any_bg {
		z-index: 9999999;
	}

	.cailiao {
		transform: translateY(6upx);
	}

	.show {
		width: 100%;
		height: 2upx;

		background-color: white;
		// border: 1px solid red;
		position: absolute;
		box-shadow: 0upx 10upx 45upx 60upx #fff;
		;
		top: -35upx;
	}

	.text {
		text-align: center;

	}

	.leftI {
		transform: translate(-5upx, 8upx);
	}

	.conta {
		width: 100%;
		position: fixed;
		height: 100upx;
		bottom: 0;
		left: 0;
		z-index: 99;
		background-color: white;
	}

	.big {
		transform: scale(1.4);
	}

	.flex-direction {
		min-height: 116upx;
		flex: 1;
	}

	.Tabbar {
		box-shadow: 0upx 0upx 45upx 35upx #5BB6BA;
		z-index: 99999;
		margin: 0 auto;
		padding: 0 10upx;
		position: relative;
		top: -6upx;
		width: 86%;
		margin: 0 auto;
		background-color: #65BAC0;
		border-radius: 30upx;
		height: 80upx;
		position: absolute;
		left: 7%;
	}

	.par {
		position: relative;
	}
</style>